<template>
    <div> 
        <h1>显示页面</h1>
    </div>
    <table class="table">
        <thead>
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>密码</td>
                <td>年龄</td>
                <td>出生日期</td>
                <td>图片</td>
                <td>性别</td>
                <td>状态</td>
                <td>入职</td>
            </tr>
        </thead>
         <tbody>
            <tr v-for="a in data">
                <td>{{a.code}}</td>
                <td>{{a.employeeName}}</td>
                <td>******</td>
                <td>{{a.num}}</td>
                <td>{{moment(a.employeeDate).format("YYYY-MM-DD")}}</td>
                <td><img style="width:45px;height:45px;" :src="axios.defaults.baseURL+a.employeeImg"></td>
                <td>{{a.sex==1?"男":"女"}}</td>
                <td>{{a.statusName}}</td>
                <td>{{a.isDeleted==true?"成功":"未成功"}}</td>
                     <td>
                        <input type="button" value="修改" @click="upaye(a.employeeId)">
                     </td>
            </tr>
        </tbody>

    </table>

     一共{{pang.count}}条,每页显示{{pang.size}}条，共{{pang.mumber}}页,当前{{pang.index}}页
      <input type="button" value="首页" @click="Pagerep(1)">
      <input type="button" value="上一页" @click="Pagerep(2)">

      <input type="button" :value="d"  v-for="d in pang.mumber" @click="Pagent(d)">

      <input type="button" value="下页" @click="Pagerep(3)">
      <input type="button" value="尾页" @click="Pagerep(4)">

       <input type="munber" style="width:30px;height:30px;" v-model="pang.index"><input type="button" value="跳转" @click="sig()">

    <select v-model="pang.size" @change="paink()">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="5">5</option>
    </select>
</template>

<script setup lang="ts">
  import axios from 'axios';
   import {ref,onMounted} from  'vue';
  import {useRouter} from 'vue-router';
  import moment  from 'moment';
  const router=useRouter();

   onMounted(()=>{

ShwoEmployee();

   })

    const Pagent=(val:number)=>{
 pang.value.index=val;
 ShwoEmployee();
    }


      const upaye=(employeeId:any)=>{
     router.push({path:"/update",query:{ids:employeeId}})
      }

    const paink=()=>{
        pang.value.index=1;
        ShwoEmployee();
    }


     


    const Pagerep=(val:any)=>{
    if(val==1){
        pang.value.index=1
        ShwoEmployee();
    }
      if(val==2&&pang.value.index>1){
       pang.value.index--;
ShwoEmployee();
      }
       if(val==3&&pang.value.index<pang.value.mumber){
       pang.value.index++;
ShwoEmployee();
       }
              if(val==4){
       pang.value.index=pang.value.count;
ShwoEmployee();
       }
    }


    const pang=ref({

         index:1,
         size:2,
         count:0,
         mumber:0,


    })

 
     const ShwoEmployee=()=>{
  axios.get("https://localhost:7164/api/Employee/ShwoEmployee",{params:pang.value}).then(res=>{
      data.value=res.data.mumber;
      pang.value.count=res.data.count;
       pang.value.mumber=Math.ceil(pang.value.count/ pang.value.size);


  })
     }

     
 const data=ref([{
      "employeeName": "李泉",
      "employeeId": 1,
      "employeeDate": "2020-02-05T00:00:00",
      "employeePwd": "123456",
      "num": 20,
      "code": "1",
      "isDeleted": true,
      "sex": 1,
      "statusId": 1,
      "statusName": "出勤",
      "employeeImg": "string"
 }])



</script>

<style scoped>

</style>